<template>
    <div>
        <div>
          <!--查看轨迹-->
          <ViewTrackMap v-if="completeRefreshViewTrack" :allListData="allListData" @mapLoading="mapLoading"></ViewTrackMap>
        </div>
        <div class="query">
            <el-form ref="ruleFormView" :model="queryParams" :rules="rules" label-width="80px">
                <el-form-item label="任务名称" prop="taskName">
                    <el-input v-model="queryParams.taskName"  readonly style="width:220px"/>
                </el-form-item>
                <el-form-item label="人员姓名" prop="userId">
                    <el-select v-model="queryParams.userId" placeholder="请选择人员" style="width:220px" clearable>
                        <el-option v-for="item in options" :key="item.userId" :label="item.userName" :value="item.userId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker v-model="queryParams.startTime"  type="datetime" placeholder="开始时间" clearable />
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker v-model="queryParams.endTime"  type="datetime" placeholder="结束时间" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup name="viewTrack">
//地图
import ViewTrackMap from '@/map/taskmanage/sceneexamine/viewTrackMap.vue';

import { detailTask ,getTrackPersonnel,searchTrack} from '@/api/taskmanage/sceneExame.js'
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const options = ref([])
const data = reactive({
    queryParams: {
        taskName:'',
        userId:'',
        startTime:'',
        endTime:'',
    },
    rules: {
      userId: [{ required: true, message: "人员名称不能为空", trigger: "blur" }],
      startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
      endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
    }
})

const {queryParams,rules} = toRefs(data)

//地图传参--start
const completeRefreshViewTrack = ref(false);//防止刷新后地图不显示
const allListData = ref([]);
const mapLoading = (msg)=>{//地图查询loading
  if(msg!=null){
    proxy.$modal.loading(msg);
  }else{
    proxy.$modal.closeLoading();
  }
}
//地图传参--end

function getTaskData() {
    const id = route.query.id;
    detailTask({ id: id }).then((response) => {
      nextTick(() => {
        console.log(response.data);
        queryParams.value.taskName =response.data.preAssessTaskEntity.taskName;
        const obj = {
          createUser:response.data.preAssessTaskEntity.createUser,
          groupId:response.data.preAssessTaskEntity.groupId,
          taskId:response.data.preAssessTaskEntity.id
        }
        getPersonnel(obj);
        completeRefreshViewTrack.value = true;//防止地图刷新后不显示
      });
    })
}

function getPersonnel(obj){
    getTrackPersonnel(obj).then(res=>{
        options.value = res.data;
        console.log(res.data);
    })
}

function submitForm(){
  proxy.$refs["ruleFormView"].validate(valid => {
    if (valid) {
      const obj={
        userId:queryParams.value.userId,
        startTime:getTime(queryParams.value.startTime),
        endTime:getTime(queryParams.value.endTime),
      }
      searchTrack(obj).then(res=>{
        //地图传参
        allListData.value = res.data ? res.data : [];
        if(allListData.value.length>0){
          proxy.$modal.msgSuccess("查询成功");
        }else{
          proxy.$modal.msgWarning("无查询结果");
        }
      })
    }
  });
}

// 转换时间yyyy-MM-dd hh:mm:ss
function getTime(time){
  let d = new Date(time);
  let month = d.getMonth() + 1;
  if(month<10){
    month = "0" + month;
  }
  let date = d.getDate();
  if(date<10){
    date = "0" + date;
  }
  let hours = d.getHours();
  if(hours<10){
    hours = "0" + hours;
  }
  let minutes = d.getMinutes();
  if(minutes<10){
    minutes = "0" + minutes;
  }
  let seconds = d.getSeconds();
  if(seconds<10){
    seconds = "0" + seconds;
  }
  let newTime = d.getFullYear() + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;

  return newTime;
}

// 重置
function resetView() {
    proxy.resetForm("ruleFormView");
}
getTaskData()
</script>

<style lang="scss" scoped>
.query {
    position: fixed;
    top: 120px;
    right: 40px;
    width: 400px;
    padding: 20px 40px;
    background: rgba($color: #ffffff, $alpha: 1);
}
</style>